<template>
	<view class="wrap">
		<view class="wrapTop">
			<view class="wrapTopInputBox">
				<image class="searchClose-icon" src="https://ceres.zkthink.com/static/img/searchImg.png"></image>
				<input placeholder="搜索附近网点" v-model="address" style="margin-left: 20upx;width: 465upx;"/>
				<view @click="getbranchList">搜索</view>
			</view>
			<view class="shop-list-nav">
				<view class="nav-item-sort">
					<text class="nav-title">{{array[index]}}</text>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="r">
							<view class="arrowDown"></view>
						</view>
					</picker>
					
				</view>
<!-- 				<view class="nav-item-sort">
					<text class="nav-title">{{array1[index1]}}</text>
					<picker @change="bindPickerChange1" :value="index1" :range="array1">
						<view class="r">
							<view class="arrowDown"></view>
						</view>
					</picker>
				</view> -->
			</view>
		</view>
		<view class="wrapContent">
			<view class="wrapContentItem" v-for="(item,index) in data" :key="index" @click="jumpSessions(item)">
				<view class="wrapContentItemName">{{item.name}}</view>
				<view class="wrapContentItemContent">{{item.address}}</view>
				<view class="wrapContentItemBottom">
					<view class="wrapContentItemBottomLeft">
						据您{{item.distance}}m
					</view>
<!-- 					<view class="wrapContentItemBottomRight">
						<text>9:00~17:00</text>
						<text>上午{{item.forenoonCount}}场</text>
						<text>下午{{item.afternoonCount}}场</text>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from './config/api'
	import {sendReq} from '../../../components/canvasShow/config/mixin/sendReqMixin.js'
	export default {
		data() {
			return {
				data:[],//数据集合
				sortIndex: 1,
				text:0,
				array: [],
				// array1: ['距离最近', '评分最高', '最多评价'],
				index:0,
				index1:0,
				longitude:'117.04320869743822',
				latitude:'36.64772370750898',
				address:'',
				dataAdd:{}
			}
		},
		onLoad() {
			this.longitude = uni.getStorageSync('longitude')?uni.getStorageSync('longitude'):'117.04320869743822'
			this.latitude = uni.getStorageSync('latitude')?uni.getStorageSync('latitude'):'36.64772370750898'
			// console.log(sendReq)
			this.getmeasureArea()
			
		},
		methods: {
			sortTap(index) {
				this.sortIndex = index
			},
			bindPickerChange(e){
				console.log(e)
				this.index = e.detail.value
				this.getbranchList()
			},
			jumpSessions(item){
				uni.setStorageSync("currentposition",item.name);
				uni.setStorageSync("positionId",item.id);
				uni.navigateBack({
					delta:1
				})
				// uni.navigateTo({
				// 	url:'/pages_category_page1/tabbar/measure/sessions?id='+id
				// })
			},
			getbranchList() {
				var _this = this
				let address = _this.address
				let area = _this.dataAdd[this.index].dictId?_this.dataAdd[this.index].dictId:''
				var apiUrl = api.branchList + '?longitude=' + this.longitude + '&latitude=' + this.latitude + '&address=' + address + '&area=' +area
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					if (JSON.stringify(res.data) !== '{}') {
						console.log(res)
						if(res.code=='200'){
							_this.data = res.data
						}
					} else {
					}
					// console.log(JSON.parse(res.data.json))
				})
			},
			getmeasureArea() {
				var _this = this
				var apiUrl = api.measureArea
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					if (JSON.stringify(res.data) !== '{}') {
						console.log(res)
						this.dataAdd = res.data
						let arr = []
						for(let i = 0;i < res.data.length; i++){
							arr.push(res.data[i].dictName)
						}
						this.array = arr
						console.log(this.array)
						this.getbranchList()
						// if(res.code=='200'){
						// 	_this.data = res.data
						// }
					} else {
					}
					// console.log(JSON.parse(res.data.json))
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.shop-list-nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80rpx;
		line-height: 76rpx;
		background: #fff;
	}

	.nav-item-sort {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		line-height: 80rpx;
	}
	.nav-item-sort .r {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 8upx;

		.arrowDown {
			width: 0;
			height: 0;
			border-width: 10rpx;
			border-style: solid;
			border-color: #CCCCCC transparent transparent transparent;
			margin-top: 2rpx;
		}

		.arrowUp {
			margin-bottom: 2rpx;
			width: 0;
			height: 0;
			border-width: 10rpx;
			border-style: solid;
			border-color: transparent transparent #CCCCCC transparent;
		}

		.activeDown {
			border-color: #EFB257 transparent transparent transparent;
		}

		.activeUp {
			border-color: transparent transparent #EFB257 transparent;
		}
	}

	.wrap {
		height: 100%;
		background-color: #F6F6F6;

		.wrapTop {
			width: 100%;
			background-color: #fff;
			padding: 24upx 30upx 0 30upx;

			.wrapTopInputBox {
				width: 690upx;
				height: 88upx;
				border: 1px solid #F6F6F6;
				border-radius: 44upx;
				display: flex;
				align-items: center;
				padding-left: 24upx;

				.searchClose-icon {
					width: 64upx;
					height: 64upx;
				}
			}
		}
	}
</style>
<style scoped lang="scss">
	.wrapContent{
		width: 690upx;
		margin: 0upx auto;
		.wrapContentItem{
			width: 100%;
			background-color: #fff;
			margin-top: 24upx;
			padding: 16upx 38upx 16upx 24upx;
			border-radius: 16upx;
			.wrapContentItemName{
				color: #333;
				font-size: 32upx;
				margin-bottom: 16upx;
			}
			.wrapContentItemContent{
				color: #333;
				font-size: 27upx;
				margin-bottom: 16upx;
				line-height: 33upx;
			}
			.wrapContentItemBottom{
				display: flex;
				justify-content: space-between;
				.wrapContentItemBottomLeft{
					color: #999;
					font-size: 28upx;
				}
				.wrapContentItemBottomRight{
					display: flex;
					color: #999;
					font-size: 28upx;
					text{
						margin-left: 8upx;
					}
				}
			}
		}
	}
</style>